<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>报表统计</el-breadcrumb-item>
                <el-breadcrumb-item>平台日订单统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="box-card">
            <el-form :inline="true" ref="form" :model="form" class="demo-form-inline" label-width="100px">

                <el-form-item label="统计日期">
                    <el-date-picker
                      v-model="form.valueTime"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="search" @click="beforeDate">前一天</el-button>
                <el-button type="primary" icon="search" @click="behindDate">后一天</el-button>
                <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <el-table :data="data" border class="table" ref="multipleTable" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="序号" align="center" width="150">
                </el-table-column>
                <el-table-column prop="paySucCount" label="支付成功总笔数" width="200" align="center">
                </el-table-column>
                <el-table-column prop="paySucAmt" label="支付成功总金额(元)" width="120" align="center">
                </el-table-column>
                <el-table-column prop="countDate" label="统计日期" width="200" align="center">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>
<script>
    export default {
        name: 'basetable',
        data() {
            return {
              url: './static/vuetable.json',
              tableData: [{
                  id: '1',
                  paySucCount: 2000,
                  paySucAmt: 20,
                  countDate:'2018-12-15'
                }, {
                  id: '2',
                  paySucCount: 2000,
                  paySucAmt: 20,
                  countDate:'2018-12-15'
                }, {
                  id: '3',
                  paySucCount: 2000,
                  paySucAmt: 20,
                  countDate:'2018-12-15'
                }, {
                  id: '4',
                  paySucCount: 2000,
                  paySucAmt: 20,
                  countDate:'2018-12-15'
                }],
              cur_page: 1,
              is_search: false,
              form: {
                valueTime:''
              },
              pickerOptions2: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
              allTotal:1350.00, // 商户交易总额(元)
              onlinepTotal:325.00, // 商户线上交易总额(元)
              coinsTotal:1000.00, // 商户投币交易总额(元)
              cardTotal:25.00, // 商户刷卡交易总额(元)
            }
        },
        created() {
            // this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    if (!is_del) {
                        return d;
                    }
                })
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            getData() { // 获取数据
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                if (process.env.NODE_ENV === 'development') {
                    // this.tableData = res.data.list;
                };
            },
            onSubmit() {
                this.is_search = true;
            },
            exportExcl() {

            },
            beforeDate() {

            },
            behindDate() {

            },
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .box-card{
      margin-bottom: 10px;
    }

    .el-icon-rank{
      font-size: 40px;
    }

    .amtPosition{
      display: inline-block;
      width: 150px;
    }
</style>
